<template>
	<view class="content">
		<door-navbar></door-navbar>
		<view class="list_box">
			<door-empty v-if="list.length == 0" text="暂无地址"></door-empty>
			<u-list @scrolltolower="scrolltolower" v-if="list.length > 0" :preLoadScreen="page * 4" height="100%">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="list_item">
						<view class="list_item_left">
							<view class="list_item_left_title">
								<text class="name">{{item.name}}</text>
								<text class="phone">{{item.phone}}</text>
							</view>
							<view class="list_item_left_content">
								<view v-if="item.type == 1" class="isDefault">默认</view>
								<view class="list_item_left_content_text"
									:style="item.type == 1 ?'width: calc(100% - 72rpx);':''">
									{{`${item.province}${item.city}${item.area}${item.address}`}}
								</view>
							</view>
						</view>
						<view class="list_item_right">
							<u-icon width="28" height="28" name="../../static/image/icon_edit.png" @click="edit(item)">
							</u-icon>
							<u-icon width="28" height="28" name="../../static/image/icon_del.png"
								@click="showDel(item)">
							</u-icon>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-button class="big_btn" text="添加新地址" @click="showAddPopup">
		</u-button>
		<u-popup :show="isShowPopup" overlayOpacity='0' closeIconPos="top-left" @close="hide">
			<view class="popup_content">
				<u-navbar :title="title" bgColor="#05061B" :titleStyle="{color:'#fff'}" leftIconColor="#fff"
					:autoBack="false" leftIconSize="40" @leftClick="hide">
				</u-navbar>
				<u--form labelPosition="left" :model="form" ref="form" labelWidth="140rpx"
					:labelStyle="{fontSize:'28rpx',color:'#C6C8DB'}">
					<u-form-item label="收货人" prop="name" borderBottom>
						<u--input v-model="form.name" border="none" :clearable="true" placeholder='请填写收货人姓名'></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="phone" borderBottom>
						<u--input v-model="form.phone" border="none" :clearable="true" placeholder='请填写收货人手机号码'>
						</u--input>
					</u-form-item>
					<u-form-item label="选择地区" prop="cityCode" borderBottom @click="showPicker = true">
						<u--input v-model="form.cityCode" border="none" :clearable="true" disabled
							disabledColor="transparent" placeholder='请选择收件地址（省、市、区）'>
						</u--input>
					</u-form-item>
					<u-form-item label="详细地址" prop="address" borderBottom>
						<u--input v-model="form.address" border="none" :clearable="true" placeholder='例如街道、门牌号、小区、单元等'>
						</u--input>
					</u-form-item>
					<u-form-item label="设为默认地址" labelWidth="180rpx" prop="type" :borderBottom="false">
						<u-switch v-model="form.type" size="40" activeColor="#323558" :activeValue="1" :inactiveValue="0">
						</u-switch>
					</u-form-item>
				</u--form>
				<u-button class="big_btn" text="保存" @click="save">
				</u-button>
			</view>
		</u-popup>
		<door-modal></door-modal>
		<u-picker :safe-area-inset-bottom="true" z-index="20000" :show="showPicker" ref="uPicker" :columns="provinces"
			keyName="name" @cancel="showPicker = false" @confirm="confirm" visibleItemCount="3" itemHeight="80"
			cancelColor="#fff" confirmColor="#fff" @change="changeHandler">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		address
	} from '@/common/address.js'
	export default {
		data() {
			return {
				provinces: [],
				current: 0,
				payType: 1,
				list: [],
				page: 1,
				isShowPopup: false,
				showPicker: false,
				userInfo: {},
				title: '',
				form: {
					id: '',
					name: '',
					phone: '',
					cityCode: '',
					address: '',
					type: '1'
				},
			};
		},
		async onLoad() {
			this.provinces = [address, address[0].cities, address[0].cities[0].counties]
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}else {
				this.userInfo = await this.$api.getUserInfo();
			}
			this.getList()
		},
		methods: {
			changeHandler(e) {
				this.provinces = [address, address[e.indexs[0]].cities, address[e.indexs[0]].cities[e.indexs[1]].counties]
			},
			confirm(e) {
				this.form.cityCode = `${e.value[0].name} ${e.value[1].name} ${e.value[2]}`
				this.showPicker = false;
			},
			async getList() {
				let res = await this.$u.api.getAddressList({
					pageNo: this.page,
					pageSize: 30,
					id: this.userInfo.id,
				})
				let list = JSON.parse(JSON.stringify(this.list));
				if (this.page == 1) {
					this.$set(this, 'list', res.data.pageData);
				} else {
					if (list.length < res.data.totalDataNum) {
						list = list.concat(res.data.pageData)
						this.$set(this, 'list', list);
					} else {
						this.$set(this, 'page', this.page - 1);
					}
				}
			},
			scrolltolower() {
				this.page += 1;
				this.getList();
			},
			showAddPopup() {
				this.title = "添加新地址"
				this.isShowPopup = true;
			},
			showDel(item) {
				this.$api.showModal({
					show: true,
					title: '删除',
					content: "确认删除此收货地址",
					success: res => {
						if (res.confirm) {
							this.$u.api.delAddress({
									id: item.id
								})
								.then(e_res => {
									if (e_res.code == 200) {
										this.$refs.uToast.show({
											type: "success",
											icon: false,
											title: "成功",
											message: "删除成功"
										});
										this.page = 1;
										this.getList()
									}
								})
						}
					}
				})
			},
			edit(e) {
				this.form = {
					id: e.id,
					name: e.name,
					phone: e.phone,
					cityCode: `${e.province} ${e.city} ${e.area} `,
					address: e.address,
					type: e.type
				}
				this.isShowPopup = true;
			},
			hide() {
				this.form = {
					id: '',
					name: '',
					phone: '',
					cityCode: '',
					address: '',
					type: '1'
				}
				this.$refs.form.resetFields();
				this.isShowPopup = false;
			},
			save() {
				if (!this.form.name) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入收货人",
					});
					return;
				} else if (!this.form.phone) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入您的预留手机号",
					});
					return;
				} else if (!this.$u.test.mobile(this.form.phone)) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入正确的预留手机号",
					});
					return;
				} else if (!this.form.cityCode) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入选择省市区",
					});
					return;
				} else if (!this.form.address) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入详细地址",
					});
					return;
				}
				if (this.form.id) {
					this.$u.api.modifyAddress({
							...this.form,
							province: this.form.cityCode.split(' ')[0],
							city: this.form.cityCode.split(' ')[1],
							area: this.form.cityCode.split(' ')[2],
						})
						.then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: "success",
									icon: false,
									title: "成功",
									message: "修改地址成功"
								});
								this.page = 1;
								this.getList()
								this.hide()
							}
						})
				} else {
					this.$u.api.addAddress({
							...this.form,
							province: this.form.cityCode.split(' ')[0],
							city: this.form.cityCode.split(' ')[1],
							area: this.form.cityCode.split(' ')[2],
						})
						.then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: "success",
									icon: false,
									title: "成功",
									message: "新增地址成功"
								});
								this.page = 1;
								this.getList();
								this.hide()
							}
						})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0;
		padding-top: 88rpx;

		.list_box {
			width: 100%;
			height: calc(100vh - 88rpx - 200rpx);
			padding: 0 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.list_item {
				padding: 30rpx;
				width: 100%;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #1F223F;
				margin-top: 20rpx;

				&_left {
					width: calc(100% - 146rpx);
					padding-right: 30rpx;
					margin-bottom: 15rpx;

					&_title {
						display: flex;
						align-items: center;

						.name {
							font-size: 28rpx;
							color: #fff;
							margin-right: 20rpx;
						}

						.phone {
							font-size: 24rpx;
							color: #C6C8DB;
						}
					}

					&_content {
						width: 100%;
						margin-top: 16rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: #8588AA;

						&_text {
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/*可自定义显示行数*/
							-webkit-box-orient: vertical;
						}
					}

				}

				&_right {
					padding-left: 30rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-left: 2rpx solid #414571;
					width: 144rpx;
				}
			}
		}

		.big_btn {
			position: absolute;
			bottom: 100rpx;
			width: calc(100vw - 80rpx);
			margin-left: 40rpx;
			border: 2rpx solid #7B68FB;
			background: #7B68FB;
			height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			height: 80rpx;
			border-radius: 10rpx;
		}

		.isDefault {
			width: 70rpx;
			text-align: center;
			height: 34rpx;
			line-height: 34rpx;
			display: inline-block;
			padding: 0 8rpx;
			border-radius: 4rpx;
			background-color: #585C8A;
			font-size: 20rpx;
			color: #C6C8DB;
			margin-right: 12rpx;
		}
	}

	.popup_content {
		width: 100vw;
		height: 100vh;
		background-color: #05061B;
		padding: 240rpx 0 0;
		position: relative;
	}

	.big_btn {
		margin-top: 60rpx;
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		background: #585C8A;
		border: 2rpx solid #585C8A;
		height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		height: 80rpx;
		border-radius: 20rpx;
	}

	/deep/.u-form {
		padding: 0 40rpx;
		color: #fff;
		font-size: 28rpx;
	}

	/deep/ .uni-input-placeholder {
		color: #8588AA !important;
	}

	/deep/ .u-form-item__body {
		padding: 30rpx 0;
	}

	/deep/ .u-switch {
		border: 4rpx solid #585C8A;
	}

	/deep/ .u-form-item__body__right__content__slot {
		justify-content: flex-end;
	}

	/deep/ .u-picker {
		background-color: #323558 !important;
	}

	/deep/ .uni-picker-view-mask {
		background: transparent !important;
	}

	/deep/ .u-picker__view__column__item {
		color: #fff;
	}
</style>
